<template>
    <view>
        <!-- 门店详情 -->
        <view class="pages">
            <view class="topbox">
                <view class="flexs align-center">
                    <image src="https://yiyueuser.oss-cn-shenzhen.aliyuncs.com/2022-03-31/8f6a2f39649048c9a5ac50750d6859e0-file" class="topboxaddicon margin-right"></image>
                    <view>
                        <view class="toptext">
                            <view class="text-black text-lg text-bold">{{ shopltlist.storeName }}</view>
                        </view>
                        <view class="text-df text-darkGray padding-top-xs" style="width: 550rpx">{{ shopltlist.location }}</view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 存放二维码的图片 -->
        <view class="container">
            <image @tap="previewImg" mode="scaleToFill" :src="imagePath"></image>
        </view>

        <!-- 画布，用来画二维码，只用来站位，不用来显示 -->
        <view class="canvas-box">
            <canvas v-if="!canvasHidden" style="width: 686rpx; height: 686rpx; background: #f1f1f1" canvas-id="mycanvas" />
        </view>
    </view>
</template>

<script>
var QR = require('../../../utils/qrcode.js');

const _request = require('../../../utils/request.js');

export default {
    data() {
        return {
            canvasHidden: false,
            imagePath: '',
            storeId: '',
            //门店id
            shopltlist: {
                storeName: '',
                location: ''
            } //门店详情
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        let orderSn = options.orderSn;
        this.setData({
            storeId: options.storeId
        });
        var size = this.setCanvasSize(); //动态设置画布大小

        const userId = uni.getStorageSync('userId');
        this.createQrCode('orderSn=' + orderSn + '&userId=' + userId, 'mycanvas', size.w, size.h);
        this.getStoreInfo();
    },
    methods: {
        //适配不同屏幕大小的canvas
        setCanvasSize: function () {
            var size = {};

            try {
                var res = uni.getSystemInfoSync();
                var scale = 750 / 686; //不同屏幕下canvas的适配比例；设计稿是750宽  686是因为样式wxss文件中设置的大小

                var width = res.windowWidth / scale;
                var height = width; //canvas画布为正方形

                size.w = width;
                size.h = height;
            } catch (e) {
                // Do something when catch error
                console.log('获取设备信息失败' + e);
            }

            return size;
        },

        /**
         * 绘制二维码图片
         */
        createQrCode: function (url, canvasId, cavW, cavH) {
            //调用插件中的draw方法，绘制二维码图片
            QR.api.draw(url, canvasId, cavW, cavH);
            setTimeout(() => {
                this.canvasToTempImage(canvasId);
            }, 1000);
        },

        /**
         * 获取临时缓存照片路径，存入data中
         */
        canvasToTempImage: function () {
            var that = this; //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。

            uni.canvasToTempFilePath({
                canvasId: 'mycanvas',
                success: function (res) {
                    var tempFilePath = res.tempFilePath;
                    console.log(tempFilePath);
                    that.setData({
                        imagePath: tempFilePath // canvasHidden:true
                    });
                },
                fail: function (res) {
                    console.log(res);
                }
            });
        },

        //门店详情
        getStoreInfo() {
            _request
                .postObj('/storeManage/getStoreInfo', {
                    storeId: this.storeId,
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        this.setData({
                            shopltlist: res.data.data
                        });
                    }
                });
        },

        /**
         * 点击图片进行预览
         */
        previewImg: function (e) {
            var img = this.imagePath;
            console.log(img);
            uni.previewImage({
                current: img,
                // 当前显示图片的http链接
                urls: [img] // 需要预览的图片http链接列表
            });
        }
    }
};
</script>
<style>
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
}

.pages {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #fbfbfb;
}

.container image {
    width: 686rpx;
    height: 686rpx;
    /* background-color: #f9f9f9; */
}
.canvas-box {
    position: fixed;
    top: 999999rpx;
    left: 0;
}

.topbox {
    width: 710rpx;
    height: 180rpx;
    background: #fff6ef;
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    border-radius: 12rpx;
}

.topboxaddicon {
    width: 80rpx;
    height: 80rpx;
    margin-left: 20rpx;
}

.toptext {
    display: flex;
    align-items: center;
}
</style>
